.context-item-mention-node {
    --mention-color-opacity: 70%;

    color: color-mix(in lch, var(--vscode-inputOption-activeForeground) calc(1.2*var(--mention-color-opacity)), transparent);
    background-color: color-mix(in lch, var(--vscode-inputOption-activeBackground) var(--mention-color-opacity), transparent);
    border-radius: 2px;
    white-space: normal;
    padding: 0 3px;
    display: inline-flex;
    align-items: baseline;
    outline-offset: -1px;
    cursor: pointer;

    .icon {
        display: inline-flex;
        align-self: center;
        width: 14px;
        height: 14px;
        margin-right: 2px;
        opacity: 0.8;
        transform: translateY(-1px);
    }

    & + .context-item-mention-node {
        margin-left: 2px;
    }

    &.context-item-mention-chip-node--focused {
        --mention-color-opacity: 100%;

        outline: solid 1px var(--vscode-inputOption-activeBorder);
    }

    &.is-too-large-or-ignored {
        text-decoration: line-through;
        color: var(--vscode-editorWarning-foreground);
    }
}

body:is([data-vscode-theme-kind='vscode-high-contrast'], [data-vscode-theme-kind='vscode-high-contrast-light']) .context-item-mention-node {
    &:not(.context-item-mention-chip-node--focused) {
        outline: solid 1px var(--vscode-input-foreground);
    }
}

/* color-mix is not supported on JetBrains webview */
html[data-ide=JetBrains] .context-item-mention-node {
    color: var(--vscode-inputOption-activeForeground);
    background-color: var(--vscode-badge-background);
    gap: 0.2rem;

    .icon {
        width: 1rem;
        height: 1rem;
    }
}
